<template>
  <el-main class="info-container">
    <el-header class="info-container-header">
      <el-input v-model="input" style="width: 240px" placeholder="输入用户名搜索"/>
      <el-select
          v-model="value"
          placeholder="政治面貌"
          style="width: 150px"
      >
      </el-select>
      <el-select
          v-model="value"
          placeholder="民族"
          style="width: 150px"
      >
      </el-select>
      <el-select
          v-model="value"
          placeholder="职位"
          style="width: 150px"
      >
      </el-select>
      <el-select
          v-model="value"
          placeholder="职称"
          style="width: 150px"
      >
      </el-select>
    </el-header>
    <el-main>
      <el-table
          :data="tableData"
          style="width: 100%"
      >
        <template #empty>
          <div class="flex items-center justify-center h-100%">
            <el-empty />
          </div>
        </template>
      </el-table>
    </el-main>
  </el-main>
</template>

<script setup lang="ts">
import {type Ref, ref, type UnwrapRef} from "vue";
import {delay} from "@/utils/utils.ts";

const input:Ref<UnwrapRef<string> | string> = ref('')
const value:Ref<UnwrapRef<string> | string> = ref('')


const updateTableDate = delay(()=>{
  // 获取数据操作
  console.log('updateTableDate')
})

</script>

<style scoped lang="scss">
.info-container{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.info-container-header{
  display: inline-flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  height: 35px;
}
</style>